<template>
  <el-dialog
      :model-value="LoginDialogVisible"
      title=""
      width="400px"
      center
      @close="handleClose"
  >
    <template #header>
      <div class="logintitle">学车啦平台</div>
    </template>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="用户登录" name="first">
        <el-form ref="loginfrom" :model="Loginform" class="logincontain">
          <el-form-item prop="userId">
            <div class="group">
              <input v-model="Loginform.userId" required="" type="text" class="input"/>
              <span class="highlight"></span>
              <span class="bar"></span>
              <label>用户名</label>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="group">
              <input v-model="Loginform.password" required="" type="password" class="input"/>
              <span class="highlight"></span>
              <span class="bar"></span>
              <label>密码</label>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="用户注册" name="second">Config</el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <button @click="handleCommit"> 登录 </button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import {ref} from "vue";

const Emits=defineEmits(['update:modelValue'])
const Loginform=ref({})
const loginfrom=ref(null)
const activeName = ref('first')

const handleClose = () =>{
  Emits('update:modelValue',false)
}
// 表单重置
const resetloginfrom = () =>{
  loginfrom.value.resetFields()
}

const handleCommit = () =>{
  console.log(Loginform.value)
  handleClose()
}

</script>

<style scoped>
:deep(.el-tabs__content){
  padding-top: 10px;
}
.logintitle{
  font-weight: 600;
  font-family: "Rubik", "Times New Roman", serif;
  font-size: 28px !important;
}
.logincontain{
  display: flex;
  flex-direction: column;
  align-items: center;
  /*background-color: #99a9bf;*/
  box-sizing: border-box;
  /*border: 1px solid blue;*/
}
.logincontain p{
  width: 100px;
  padding: 20px;
  box-sizing: border-box;
}
/* From uiverse.io by @G4b413l */
.group {
  position: relative;
}

.input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
}

.input:focus {
  outline: none;
}

label {
  color: #cbcbcb;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.input:focus ~ label, .input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5e75d9;
}

.bar {
  position: relative;
  display: block;
  width: 300px;
}

.bar:before, .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5e75d9;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

.input:focus ~ .bar:before, .input:focus ~ .bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

.input:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
}

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }

  to {
    width: 0;
    background: transparent;
  }
}
/* From uiverse.io by @Botwe-Felix5820 */
button {
  height: 40px;
  width: 100px;
  background: transparent;
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
  border: 2px solid #016DD9;
  outline: none;
  color: #016DD9;
  font-size: 17px;
}

button:hover {
  background: #016DD9;
  color: #ffffff;
  animation: squeeze3124 0.9s both;
}

@keyframes squeeze3124 {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

</style>